<template>
	<div class="etit-after-sale" v-if="show">
		<head-back-title title="编辑售后"></head-back-title>
		<el-card>
			<p class="order-title">订单详情</p>
			<div class="order-info">
				<p class="order-info-title">订单信息</p>
				<div class="order-info-content">
					<el-row :gutter="20">
						<el-col :span="4">用户ID：{{ orderInfo.user_id }}</el-col>
						<el-col :span="4" v-if="admin_id != 3">客户名字：{{ orderInfo.address_id.consignee }}</el-col>
						<el-col :span="4" v-if="admin_id != 3">客户电话：{{ orderInfo.address_id.mobile }}</el-col>
						<el-col :span="4">订单编号：{{ orderInfo.order_sn }}</el-col>
						<el-col :span="4">订单id：{{ orderInfo.order_id }}</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4" v-if="admin_id != 3">订单总价：{{ orderInfo.retail_price }}</el-col>
						<el-col :span="4">订单状态：{{ orderInfo.status_name }}</el-col>
						<el-col :span="4">订单金额：{{ orderInfo.order_amount }}</el-col>
						<el-col :span="10" v-if="admin_id != 3">
							客户地址：{{ orderInfo.address_id.province }}{{ orderInfo.address_id.city }}{{ orderInfo.address_id.district }}{{ orderInfo.address_id.address }}
						</el-col>
					</el-row>		
					<el-row :gutter="20" v-if="admin_id != 3">
						<el-col :span="4">预付款：{{ orderInfo.order_amount }}</el-col>
						<el-col :span="4" v-if="orderInfo.coupon_info != null">优惠券金额：{{ orderInfo.coupon_info.money }}</el-col>
						<el-col :span="4">尾款：0</el-col>
						<el-col :span="4">签约：{{ orderInfo.introduce_user }}</el-col>
						<el-col :span="4">运营：{{ orderInfo.follow_user }}</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4" v-if="admin_type == 1">财务备注：{{ orderInfo.platform_remark }}</el-col>
						<el-col :span="4">用户备注：{{ orderInfo.brief }}</el-col>
						<el-col :span="4" v-if="orderInfo.type == 1">订单类型：普通订单</el-col>
						<el-col :span="4" v-if="orderInfo.type == 2">订单类型：进货订单</el-col>
						<el-col :span="4">下单时间：{{ orderInfo.add_time }}</el-col>
					</el-row>
				</div>
			</div>
			<div class="shipping-info">
				<p class="order-info-title">厂家发货信息</p>
				<div class="order-info-content">
					<el-row :gutter="20">
						<el-col :span="3">收件人：{{ orderInfo.shippingInfo.consignee }}</el-col>
						<el-col :span="4">收件电话：{{ orderInfo.shippingInfo.mobile }}</el-col>
						<el-col :span="10">
							收件地址：{{ orderInfo.shippingInfo.province }}{{ orderInfo.shippingInfo.city }}{{ orderInfo.shippingInfo.district
							}}{{ orderInfo.shippingInfo.address }}
						</el-col>
						<el-col :span="4">物流付费：货到付款</el-col>
					</el-row>
				</div>
			</div>
			<div class="logistics-info" v-if="orderInfo.order_logistics && admin_id != 3">
				<p class="order-info-title">物流点信息</p>
				<div class="order-info-content">
					<el-row :gutter="20">
						<el-col :span="4">物流公司名称：{{ orderInfo.expressCompany }}</el-col>
						<el-col :span="4">开始物流点联系电话：{{ orderInfo.order_logistics.start_mobile }}</el-col>
						<el-col :span="4">开始物流点座机号：{{ orderInfo.order_logistics.start_landline }}</el-col>
						<el-col :span="10">开始物流点地址：{{ orderInfo.order_logistics.start_address }}</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4">结束物流联系人：{{ orderInfo.order_logistics.end_consignee }}</el-col>
						<el-col :span="4">结束物流点联系方式：{{ orderInfo.order_logistics.end_mobile }}</el-col>
						<el-col :span="4">结束物流点座机号：{{ orderInfo.order_logistics.end_landline }}</el-col>
						<el-col :span="10">结束物流点地址：{{ orderInfo.order_logistics.end_address }}</el-col>
					</el-row>
				</div>
			</div>
			<div class="logistics-info" v-if="admin_id != 3">
				<p class="order-info-title">物流方向</p>
				<div class="order-info-content">
					<el-row :gutter="20">
						<el-col :span="4">商家物流方向：{{ orderInfo.direction }}</el-col>
						<el-col :span="20">详细地址：{{ orderInfo.direction_detailed }}</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4">厂家物流方向：{{ orderInfo.factory_direction }}</el-col>
					</el-row>
				</div>
			</div>
			<div class="logistics-info" v-if="orderInfo.express_img.length > 0 && admin_id != 3">
				<p class="order-info-title">物流单</p>
				<div class="order-info-content">
					<el-image
						v-for="(item, index) in orderInfo.express_img"
						:key="index"
						:src="item"
						:preview-src-list="orderInfo.express_img"
						style="width: 50px; height: 50px; vertical-align: top;margin-left: 20px;"
					></el-image>
				</div>
			</div>
			<p class="order-title title">售后信息（申请时间 {{infoForm.add_time}} ）
				<el-button type="primary" size="mini" @click="openDialog">一键补件/换货</el-button>
			</p>
			<el-form :model="infoForm" ref="infoForm" :rules="infoFormRules" label-width="120px" style="margin-top: 20px;">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="订单商品编号:" prop="rec_id">
							<el-input v-model="infoForm.rec_id" :disabled="true" placeholder="请输入订单商品编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="订单SKU:" prop="sku_sn"><el-input v-model="infoForm.sku_sn" :disabled="true" placeholder="请输入商品SKU"></el-input></el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="售后等级:">
							<el-select v-model="infoForm.after_level" placeholder="请选择售后等级">
								<el-option v-for="(item,index) in levelList" :key="index" :value="item.after_level" :label="item.level_name"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="infoForm.status>=1">
						<el-form-item label="售后类型:" prop="type">
							<el-select v-model="infoForm.type" placeholder="请选择" @change="onChangeType" :disabled="infoForm.status ==3">
								<el-option v-for="(item,index) in typeOption" :key="index" :value="item.value" :label="item.label" ></el-option>
							</el-select>
						</el-form-item>
					</el-col> 
					<el-col :span="6" v-if="infoForm.status>=1">
						<el-form-item label="责任划分:" prop="duty">
							<el-select v-model="infoForm.duty" placeholder="请选择" :disabled="infoForm.status ==3">
								<el-option v-for="(item,index) in dutyOption" :key="index" :value="item.value" :label="item.label"></el-option>
							</el-select>
						</el-form-item>
					</el-col> 
					<el-col :span="6">
						<el-form-item label="状态:" prop="status">
							<el-input :value="infoForm.status | countStatus" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="infoForm.status>=1">
						<el-form-item label="预处理时间:" prop="estimate_time">
							 <el-date-picker
							v-model="infoForm.estimate_time"
							value-format="yyyy-MM-dd"
							type="date"
							:disabled="infoForm.status ==3"
							placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="备注:" prop="remarks">
							<el-input
							  type="textarea"
							  :rows="3"
							  placeholder="请输入内容"
							  :disabled="infoForm.status ==3"
							  v-model="infoForm.remarks">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="infoForm.status>=1">
						<el-form-item label="售后描述(用户):" prop="content">
							<el-input
							:disabled="true"
							  type="textarea"
							  :rows="3"
							  placeholder="请输入内容"
							  v-model="infoForm.content">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="isSite && infoForm.status >=1">
						<el-form-item label="收货地址:" prop="after_address" class="barter">
							<el-input
							  placeholder="请输入内容"
							  :disabled="infoForm.status ==3"
							  v-model="infoForm.after_address">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" class="progress" v-if="infoForm.status>=2">
						<el-form-item label="售后进度：">
							<ul class="progress-list">
								<li class="list-item" v-for="(item,index) in infoForm.upimg" :key="index">
									<div class="item-left" v-if="index>0">{{item.add_time}}</div>
									<div class="item-left" v-else style="fontSize:16px;fontWeight:600">{{item.add_time}}</div>
									<div class="item-right" v-if="index>0">
										<el-input
										placeholder="请输入进度内容"
										v-model.trim="item.name"
										type="textarea"
										:rows="item.name.length>94?2:1"
										@focus="onHide"
										:disabled="item.status != 3 || infoForm.status ==3"
										@blur="addProgress(index)" @input="onInputUpdate"></el-input>
										<i class="el-icon-error" @click="delInput('schedule',index)" v-if="item.status == 3 && infoForm.status !=3"></i>
									</div>
									<div class="item-right" v-else style="textAlign:center;fontSize:16px;fontWeight:600">
										<span style="margin:0 auto">{{item.name}}</span>
									</div>
								</li>
								<li class="item-push" v-if="infoForm.status !=3 && isAddInput">
									<i class="el-icon-plus" @click="addInput('schedule')"></i>
								</li>
							</ul>
						</el-form-item>
					</el-col>
					<el-col :span="24" class="progress">
						<el-form-item label="售后费用：">
							<ul class="progress-list">
								<li class="list-item" v-for="(item,index) in infoForm.mode" :key="index">
									<div class="item-left" v-if="index>0">{{item.add_time}}</div>
									<div class="item-left" v-else style="fontSize:16px;fontWeight:600">{{item.add_time}}</div>
									<div class="item-right" v-if="index>0">
										<el-row style="width:100%" :gutter="20">
											<el-col :span="3" class="col8">
											  <el-input v-model.trim="item.income" placeholder="请输入收入金额" @blur="addAfterMode(index)" @input="item.income = item.income.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')">
												  <i slot="suffix" class="el-input__icon">元</i>
											  </el-input>
										  </el-col>
										   <el-col :span="3" class="col8">
											  <el-input v-model.trim="item.expenditure" placeholder="请输入支出金额" @blur="addAfterMode(index)" @input="item.expenditure = item.expenditure.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')">
												  <i slot="suffix" class="el-input__icon">元</i>
											  </el-input>
										  </el-col>
										   <el-col :span="4" class="col8">
											   <base-select :list="infoForm.undertaker_list" :res="item.undertaker_item" :index="index" type="undertaker" @getSelect="onGetSelect"></base-select>
										  </el-col>
										   <el-col :span="4" class="col8">
											   <base-select :list="infoForm.expenditure_list" :res="item.expenditure_item" :index="index" type="expenditure" @getSelect="onGetSelect"></base-select>
										  </el-col>
										  <el-col :span="3" class="col8">
											  <el-input disabled v-model="item.total_price" placeholder="请输入总计" @blur="addAfterMode(index)">
												  <i slot="suffix" class="el-input__icon">元</i>
											  </el-input>
										  </el-col>
										  
										  <el-col :span="4" class="col8">
											  <base-select :list="infoForm.price_type" :res="item.price_item" :index="index" type="price" @getSelect="onGetSelect" style="flex:1"></base-select>
										  </el-col>
										  <el-col :span="3" style="textAlign:center;display: flex;">
											  	<el-input v-model="item.desc" placeholder="请输入备注" @blur="addAfterMode(index)"></el-input>
											   <i class="el-icon-error" v-if="item.mode_id" @click="delInput('mode',index)"></i>
										  </el-col>
										</el-row>
									</div>
									<div class="item-right" v-else style="fontSize:16px;fontWeight:600">
										<el-row style="width:100%" :gutter="20">
											<el-col :span="3" class="col8">
											  	{{item.income}}
										  	</el-col>
										  <el-col :span="3" class="col8">
											  {{item.expenditure}}
										  </el-col>
										   <el-col :span="4" class="col8">
											  {{item.undertaker_item}}
										  </el-col>
										   <el-col :span="4" class="col8">
											  {{item.expenditure_item}}
										  </el-col>
										   <el-col :span="3" class="col8">
											  {{item.total_price}}
										  </el-col>
										   <el-col :span="4" class="col8">
											  {{item.price_item}}
										  </el-col>
										  <el-col :span="3" style="textAlign:center">
											  {{item.desc}}
										  </el-col>
										</el-row>
									</div>
								</li>
								<li class="item-push" v-if="isCostInput">
									<i class="el-icon-plus" @click="addInput('cost')"></i>
								</li>
							</ul>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="text-align:center">
						<el-button type="primary" @click="nextStep" style="margin:20px auto;" v-if="infoForm.status !=3">下一步({{infoForm.status+1 | countStatus}})</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div class="title">
							售后图片上传(多图)
							<el-tag>图片仅限JPG/PNG格式</el-tag>
						</div>
					</el-col>
					<div class="clearfix"></div>
					<div class="case_upload clearfix">
						<el-col :span="18">
							<el-form-item label="上传整体图:" class="upload-box" prop="viceImages">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 0); } " multiple accept="image/*" >
											<el-button type="primary" size="small">上传图片</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(1)">重置</el-button>
										<div class="el-upload__tip">小于500KB</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!viceImages.length"><div slot="error"></div></el-image>
										<div v-for="(data, index) in viceImages" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index, 1,data.order_after_img_id)"></i>
											<el-image :preview-src-list="infoForm.viceImages" :src="data.image" fit="contain"></el-image>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="上传细节图:" class="upload-box" prop="infoImages">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 1); } " multiple accept="image/*" > <el-button type="primary" size="small">上传图片</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(2)">重置</el-button>
										<div class="el-upload__tip">小于500KB</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!infoImages.length"><div slot="error"></div></el-image>
										<div v-for="(data, index) in infoImages" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index, 2,data.order_after_img_id)"></i>
											<el-image :preview-src-list="infoForm.infoImages" :src="data.image" fit="contain"></el-image> </div>
									</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="上传包装图:" class="upload-box" prop="pageImages">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 2); } " multiple accept="image/*" > <el-button type="primary" size="small">上传图片</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(3)">重置</el-button>
										<div class="el-upload__tip">小于500KB</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!pageImages.length"><div slot="error"></div></el-image>
										<div v-for="(data, index) in pageImages" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index, 3,data.order_after_img_id)"></i>
											<el-image :preview-src-list="infoForm.pageImages" :src="data.image" fit="contain"></el-image>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="18">
							<el-form-item label="上传视频:" class="upload-box">
								<div class="case-img-upload">
									<div class="case-img-upload-btns">
										<el-upload
										ref="upload"
										action="fakeaction"
										:show-file-list="false"
										:http-request="function(res){return upload2(res);}"
										accept="video/mp4,avi"
										>
											<el-button type="primary" size="small">上传视频</el-button>
										</el-upload>
										<el-button type="danger" size="small" @click="rest(4)">重置</el-button>
										<div class="el-upload__tip">视频不能大于100M</div>
									</div>
									<div class="case-img-upload-imgs">
										<el-image v-if="!map4Video.length"><div slot="error"></div></el-image>
										<div v-for="(item,index) in map4Video" :key="index" class="vice_big_box" v-else>
											<i class="el-icon-error" @click="delVice(index,4,item.order_after_img_id)"></i>
											<video controls="controls" :src="item.image" class="avatar"/>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
					</div>
				</el-row>
				<el-button type="primary" @click="submitForm('infoForm')"  style="margin-left: 40px;" v-if="isSubimt">保存</el-button>
				<el-button type="primary" style="margin-left:40px" v-else>提交中...</el-button>
			</el-form>
		</el-card>
		<el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px" center
		 :modal-append-to-body="false" @close="onClose('patchForm')">
			<el-form :model="patchForm" :rules="patchFormRules" label-width="100px" ref="patchForm">
				<el-form-item label="商品类型:" prop="is_online">
					<el-select v-model="patchForm.is_online">
						<el-option label="线下产品" :value="1"></el-option>
						<el-option label="线上产品" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="类型:" prop="type">
					<el-select v-model="patchForm.type">
						<el-option label="补件" :value="1"></el-option>
						<el-option label="换货" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品ID:" v-if="patchForm.is_online == 2" prop="goods_id">
					<el-input v-model="patchForm.goods_id" disabled></el-input>
					<span style="cursor: pointer;color: #34a1e0;" @click="openGoodsView">点这里快速选择商品</span>
				</el-form-item>
				<el-form-item label="skuID:" v-if="patchForm.is_online == 2" prop="sku_id">
					<el-select v-model="patchForm.sku_id" placeholder="请选择">
						<el-option :label="item.label" :value="item.value" v-for="item in sku_list" :key="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品名称:" v-if="patchForm.is_online == 1" prop="goods_name">
					<el-input v-model="patchForm.goods_name"></el-input>
				</el-form-item>
				<el-form-item label="内容:" prop="content">
					<el-input v-model="patchForm.content"></el-input>
				</el-form-item>
				<el-form-item label="商品图片:" v-if="patchForm.is_online == 1" prop="img">
					<div class="goods_img">
						<div class="img-list" v-if="patchForm.img.length">
							<div class="img-item" v-for="(item,index) in patchForm.img" :key="index">
								<img :src="item" class="avatar" />
								<i class="el-icon-close del" @click="delImg(index)"></i>
							</div>
						</div>
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return uploadImg(res); } " multipleaccept="image/*" > 
							<i class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<div class="el-upload__tip">小于1MB</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button  @click="onClose('patchForm')">取消</el-button>
				<el-button type="primary" @click="addForm('patchForm')">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import goods from '@/components/layer-dialog/good-recommend.vue';
import BaseSelect from '@/components/BaseSelect/index.vue'
export default {
	data() {
		return {
			show:false,
			admin_type: localStorage.getItem('admin_type'),
			admin_id: localStorage.getItem('admin_id'), 
			typeOption:[{
				label:'无',
				value:0
			},{
				label:'驳回',
				value:1
			},
			{
				label:'换货',
				value:2
			},
			{
				label:'补件',
				value:3
			},
			{
				label:'维修',
				value:4
			},
			{
				label:'退货',
				value:5
			},
			{
				label:'其他',
				value:6
			}],
			dutyOption:[{
				label:'无',
				value:0
			},{
				label:'客户',
				value:1
			},
			{
				label:'总部',
				value:2
			},
			{
				label:'工厂',
				value:3
			},
			{
				label:'物流',
				value:4
			},
			{
				label:'仓库',
				value:5
			}],
			statusOption:[{
				label:'待处理 ',
				value:0
			},
			{
				label:'处理中',
				value:1
			},
			{
				label:'已处理',
				value:2
			}],
			infoForm: {
				rec_id:'',
				type:'',
				duty:'',
				content:'',
				brief:'',
				viceImages:'',
				infoImages:'',
				pageImages:'',
				status:'',
				after_video:'',
				remarks:'',
				upimg:[],
				after_address:""
			},
			infoFormRules: {
				rec_id: [{ required: true, message: '请输入订单商品编号' }],
				type: [{ required: true, message: '请选择售后类型' }],
				duty: [{ required: true, message: '请选择责任划分' }],
				status: [{ required: true, message: '请选择状态' }],
				content: [{ required: true, message: '请输入售后描述', }],
				brief: [{ required: true, message: '请输入备注', }],
				viceImages: [{ required: true, message: '请上传整体图' }],
				infoImages: [{ required: true, message: '请上传细节图' }],
				pageImages: [{ required: true, message: '请上传包装图' }],
				estimate_time:[{required:true,message:'请选择时间',trigger: 'change'}]
			},
			viceImages: [],
			infoImages: [],
			pageImages: [],
			orderInfo: '',
			map4Video:[],
			isSite:false,//显示地址输入
			ress:"",//保存原来的地址
			isAddInput:true,
			is_submit:false,
			dialogVisible:false,
			patchForm:{
				is_online:1,
				goods_id:'',
				sku_id:'',
				goods_name:'',
				img:[],
				type:'',
				content:''
			},
			patchFormRules:{
				is_online:[{required:true,message:'请选择商品类型'}],
				type:[{required:true,message:'请选择类型'}],
				goods_id:[{required:true,message:'请输入商品ID'}],
				sku_id:[{required:true,message:'请输入skuID'}],
				goods_name:[{required:true,message:'请输入商品名称'}],
				img:[{required:true,message:'请上传图片'}]
			},
			sku_list:[],
			title:'补件/换货信息',
			isCostInput:true,
			levelList:[],
			isSubimt:true
		};
	},
	methods: {
		getAfterInfo(){
			let data = {
				order_after_id: this.$route.query.id
			};
			this.$http(this.$ApiList.AfterInfo, data).then(res => {
				this.infoForm = res.datas;
				this.ress = res.datas.after_address;
				if(this.infoForm.estimate_time == 0){
					this.$set(this.infoForm,'estimate_time','')
				}
				this.infoForm.viceImages = [];
				this.infoForm.infoImages = [];
				this.infoForm.pageImages = [];
				this.infoForm.after_video = [];
				this.infoForm.upimg = res.datas.progress || []
				this.infoForm.after_level = res.datas.after_level == 0 ? '':res.datas.after_level
				this.infoForm.image.forEach(b => {
					if (b.type == 1) {
						this.infoForm.viceImages.push(b.image);
						this.viceImages.push(b);
					} else if (b.type == 2) {
						this.infoForm.infoImages.push(b.image);
						this.infoImages.push(b);
					} else if (b.type == 3) {
						this.infoForm.pageImages.push(b.image);
						this.pageImages.push(b);
					}else if(b.type == 4){
						this.infoForm.after_video.push(b.image);
						this.map4Video.push(b)
					}
				});
				this.infoForm.upimg.unshift({
					add_time:"日期",
					name:"售后进度"
				})
				this.infoForm.mode.unshift({
					add_time:'日期',
					expenditure:'支出',
					undertaker_item: '承担人',
					expenditure_item: '支出对象',
					total_price:'合计',
					price_item:'费用类别',
					income:'收入',
					desc:'备注'
				})
				this.is_submit = false;
			}).then(()=>{
				this.onChangeType();
			});
		},
		init() {
			this.getAfterInfo();
			
			let oderdata = {
				order_id: this.$route.query.order_id
			};
			
			this.$http(this.$ApiList.OrderInfo, oderdata).then(res => {
				this.orderInfo = res.datas;
				// 厂家发货信息
				if (this.orderInfo.factory_move == 3) {
					this.orderInfo.shippingInfo = this.orderInfo.factory_address_id;
				} else {
					this.orderInfo.shippingInfo = this.orderInfo.address_id;
				}
				this.show = true
			}).then(()=>{
				this.onChangeType();
			});
			this.$http(this.$ApiList.getLevelList).then((res) => {
				this.levelList = res.datas;
			});
		},
		// 图片上传
		upload(params, type) {
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt500KB = file.size / 1024 <= 500;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt500KB) {
				this.$message.error('图片不能大于500K!');
				return;
			}
			
			let typenum = type+1
			const form = new FormData();
			form.append('file[]', file);
			form.append('type', typenum);
			form.append('order_after_id', this.infoForm.order_after_id);
			
			switch (Number(type)) {
				case 0:
					this.$http(this.$ApiList.AddImgAfterSale, form).then(res => {		
						this.viceImages.push({
							image:res.datas[0].imgUrl,
							order_after_img_id:res.datas[0].image_id,
						});
					});
					break;
				case 1:
				this.$http(this.$ApiList.AddImgAfterSale, form).then(res => {
					this.infoImages.push({
						image:res.datas[0].imgUrl,
						order_after_img_id:res.datas[0].image_id,
					});
				});
					break;
				case 2:
				this.$http(this.$ApiList.AddImgAfterSale, form).then(res => {
					this.pageImages.push({
						image:res.datas[0].imgUrl,
						order_after_img_id:res.datas[0].image_id,
					});
				});
					break;
			}
		},
		// 重置图片
		rest(type) {
			switch (type) {
				case 1:
					this.viceImages = [];
					break;
				case 2:
					this.infoImages = [];
					break;
				case 3:
					this.pageImages = [];
					break;
				case 4:
					this.map4Video = [];
					break;
			}
		},
		// 删除附图
		delVice(index, type,id) {
			let data = {
				order_after_img_id:id
			}
			this.$confirm('删除后不可恢复，是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					if(type == 1){
						this.$http(this.$ApiList.DelAfterSaleImg, data).then(res => {
							this.viceImages.splice(index, 1);
						});
					}else if(type == 2){
						this.$http(this.$ApiList.DelAfterSaleImg, data).then(res => {
							this.infoImages.splice(index, 1);
						});
					}else if(type == 3){
						this.$http(this.$ApiList.DelAfterSaleImg, data).then(res => {
							this.pageImages.splice(index, 1);
						});
					}else if(type == 4){
						this.$http(this.$ApiList.DelAfterSaleImg, data).then(res => {
							this.map4Video.splice(index,1);
						});
					}
				})
				.catch(() => {});
		},
		// 视频上传
		upload2(params) {
			const file = params.file,
				fileType = file.type,
				isLt1MB = file.size / 1024 <= 100024;
			if (!isLt1MB) {
				this.$message.error('视频不能大于100M');
				return;
			}
			let formData = new FormData();
			formData.append('file[]', file);
			formData.append('type', 4);
			formData.append('order_after_id', this.infoForm.order_after_id);
			this.$http(this.$ApiList.AddImgAfterSale,formData).then(res=>{
				this.map4Video.push({
					image:res.datas[0].imgUrl,
					order_after_img_id:res.datas[0].image_id
				});
			})
		},
		//提交
		submitForm(formName) {
			this.isSubimt = false
			let viceImages = [],
					infoImages = [],
					pageImages = [],
					map4Video =[]
			this.viceImages.forEach(item => {
				viceImages.push(item.image)
			})
			this.infoImages.forEach(item => {
				infoImages.push(item.image)
			})
			this.pageImages.forEach(item => {
				pageImages.push(item.image)
			})
			this.map4Video.forEach(item=>{
				map4Video.push(item.image)
			})
			let data = JSON.parse(JSON.stringify(this.infoForm))
			if(viceImages.length !=''){
				data.viceImages = viceImages.join(',')
			}
			if(infoImages.length !=''){
				data.infoImages = infoImages.join(',')
			}
			if(pageImages.length !=''){
				data.pageImages = pageImages.join(',')
			}
			if(this.map4Video.length){
				data.after_video = map4Video.join(',')
			}
			// 去除空的进度内容
			if(data.upimg.length){
				data.upimg = data.upimg.filter(item=>{
					if(item.name){
						return item;
					}
				})
			}
			// 去除空的售后费用
			if(data.mode.length){
				data.mode = data.mode.filter(item=>{
					if(item.mode_id){
						return item
					}
				})
			}
			this.$refs[formName].validate(valid => {
				if (valid) {
					delete data.image;
					delete data.progress;
					delete data.estimate_time
					delete data.undertaker_list
					delete data.expenditure_list
					delete data.price_type
					data.upimg.splice(0,1);
					data.upimg = JSON.stringify(data.upimg);
					data.mode = JSON.stringify(data.mode)
					this.$http(this.$ApiList.UpAfterSale, data).then(res => {
						this.$message.success('编辑成功')
						this.$router.push({ path: '/after_sale_list' });
						this.isSubimt = true
					});
				} else {
					this.$message.success('请填写完整信息后提交')
					this.isSubimt = true
				}
			});
		},
		// 添加多一项
		addInput(type){
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth()+1 <10?`0${date.getMonth()+1}`:date.getMonth()+1;
			let date2 = date.getDate();
			if(type === 'schedule'){
				let item ={
					name:'',
					add_time:`${year}.${month}.${date2}`,
					status:3
				}
				this.infoForm.upimg.push(item);
				this.isAddInput = false;
			}else if(type === 'cost'){
				let item = {
					add_time:`${year}.${month}.${date2}`,
					total_price:'',
					income:'',
					price_item:[],
					expenditure:'',
					undertaker_item: [],
					expenditure_item: [],
					desc:''
				}
				this.infoForm.mode.push(item)
				this.isCostInput = false
			}
			
			this.$forceUpdate();
		},
		// 删除一项
		delInput(type,index){
			this.$confirm('删除后不可恢复，是否确认删除？','提示',{
				confirmButtonText:'确定',
				cancelButtonText:'取消',
				type:'warning'
			}).then(()=>{
				if(type === 'schedule'){
					if(!this.infoForm.upimg[index].progress_id){
						this.infoForm.upimg.splice(index,1);
						this.$forceUpdate();
						return false;
					}
					let data = {
						progress_id:this.infoForm.upimg[index].progress_id,
						order_after_id:this.$route.query.id
					}
					this.infoForm.upimg.splice(index,1);
					this.$forceUpdate();
					this.$http(this.$ApiList.DelProgress,data).then(res=>{
						this.$message({
							message:res.datas,
							type:'success'
						})
					})
				}else if(type === 'mode'){
					let data = {
						order_after_id:this.infoForm.order_after_id,
						mode_id:this.infoForm.mode[index].mode_id
					}
					this.$http(this.$ApiList.DelAfterMode,data).then(res=>{
						this.$delete(this.infoForm.mode,index)
						this.$message.success(res.datas)
					})
				}
				
			})
			
		},
		// 提交进度
		addProgress(index){
			let item = this.infoForm.upimg[index]
			if(item.progress_id){
				let { type,duty,content,brief,status,estimate_time,after_address,remarks,order_after_id,upimg } =this.infoForm;
				let data = {
					type,
					duty,
					content,
					brief,
					status,
					estimate_time,
					after_address,
					remarks,
					order_after_id
				}
				// 去除空的进度内容
				if(this.infoForm.upimg.length){
					this.infoForm.upimg = this.infoForm.upimg.filter(item=>{
						if(item.name){
							return item;
						}
					})
				}
				upimg.splice(0,1);
				data.upimg = JSON.stringify(upimg);
				this.$http(this.$ApiList.UpAfterSale,data).then(res=>{

				}).then(()=>{
					this.isAddInput = true
				})
				return false;
			}
			if(item.name){
				let data ={
					order_after_id:this.$route.query.id,
					name:item.name
				}
				this.$http(this.$ApiList.AddProgress,data).then(res=>{
				}).then(()=>{
					let data = {
						order_after_id: this.$route.query.id
					};
					this.$http(this.$ApiList.AfterInfo, data).then(res => {
						this.infoForm.upimg = res.datas.progress || [];
						this.infoForm.upimg.unshift({
							add_time:"日期",
							name:"售后进度"
						})
						this.$forceUpdate();
					})
				}).then(()=>{
					this.isAddInput = true;
				})
			}
		},
		onInputUpdate(){
			this.$forceUpdate();
		},
		// 显示地址输入框
		onChangeType(){
			let type = this.infoForm.type
			if(type === 2 || type === 3 || type === 4){
				this.isSite = true
			}else{
				this.isSite = false;
				this.infoForm.after_address = this.ress;
			}
		},
		// 下一步
		nextStep(){
			if(this.is_submit){
				return;
			}
			this.is_submit = true;
			let data = {
				order_after_id:this.infoForm.order_after_id
			}
			if(this.infoForm.status == 1 || this.infoForm.status == 2){
				if(this.infoForm.type == 0){
					this.$message.error('请选择售后类型');
					this.is_submit = false;
					return false;
				}
				if(this.infoForm.duty == 0){
					this.$message.error('请选择责任划分');
					this.is_submit = false;
					return false;
				}
				if(this.infoForm.status == 1){
					if(this.infoForm.estimate_time == ''){
						this.$message.error('请选择处理时间');
						this.is_submit = false;
						return false;
					}
					data.estimate_time = this.infoForm.estimate_time;
				}
				if(this.isSite && !this.infoForm.after_address){
					this.$message('请填写收货地址');
					this.is_submit = false;
					return false;
				}
				data.duty = this.infoForm.duty;
				data.after_address = this.infoForm.after_address;
				data.type = this.infoForm.type;
			}
			let status = this.infoForm.status + 1
			this.$http(status == 1?this.$ApiList.AfterConsult:(status == 2?this.$ApiList.AfterHandle:this.$ApiList.AfterComplete),data).then(res=>{
				this.viceImages = [];
				this.infoImages = [];
				this.pageImages = [];
				this.map4Video = [];
				this.getAfterInfo();
			})
		},
		// 聚焦时隐藏添加
		onHide(){
			this.isAddInput = false
		},
		// 弹窗
		openDialog(type){
			this.dialogVisible = true;
		},
		// 上传图片
		uploadImg(params) {
			const file = params.file,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1M');
				return;
			}

			let image = new FormData();
			image.append('file[]', file);

			this.$http(this.$ApiList.publicUpload, image).then(res => {
				this.patchForm.img.push(res.datas[0]);
			});
		},
		openGoodsView(){
			this.$layer.iframe({
				title: '选择商品',
				maxmin: true,
				area: ['50%', '60%'],
				content: {
					content: goods, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
						num:'one'
					} //props
				}
			});
		},
		setGoodsId(ids) {
			this.patchForm.goods_id = ids;
		},
		getGoodsList(goods_id){
			let data ={
				goods_id
			}
			this.sku_list = []
			this.$http(this.$ApiList.GoodsInfo, data).then(res => {
				res.datas.sku_lists.forEach(item=>{
					let obj = {
						label:`${item.color} ${item.lining} ${item.size}`,
						value:item.sku_id
					}
					this.sku_list.push(obj)
				})
			});
		},
		addForm(formName){
			this.$refs[formName].validate((valid)=>{
				if(valid){
					if(this.patchForm.is_online == 1){
						delete this.patchForm.goods_id;
						delete this.patchForm.sku_id;
					}else if(this.patchForm.is_online == 2){
						delete this.patchForm.goods_name;
						delete this.patchForm.img;
					}
					this.patchForm.order_after_id = this.$route.query.id;
					let data = this.patchForm;
					data.img = this.patchForm.img.join(',')
					this.$http(this.$ApiList.AddAfterGoods,data).then(res=>{
						this.$message.success(res.datas);
						this.dialogVisible = false;
						this.$refs[formName].resetFields();
					})
				}else{
					this.$message.error('请将必填项填写完整！')
				}
			})
		},
		onClose(formName){
			this.dialogVisible = false;
			this.$refs[formName].resetFields();
		},
		// 删除上传的商品补件图
		delImg(index){
			this.patchForm.img.splice(index,1);
		},
		// 添加售后费用
		addAfterMode(index){
			console.log(index)
			// 判断价格
			let item = this.infoForm.mode[index]
			if(item.income && item.expenditure){
				this.infoForm.mode[index].total_price = Number(item.income) - Number(item.expenditure)
			}else{
				if(item.income && !item.expenditure){
					this.infoForm.mode[index].total_price = Number(item.income) + 0
				}else if(!item.income && item.expenditure){
					this.infoForm.mode[index].total_price = 0 - Number(item.expenditure)
				}else{
					this.infoForm.mode[index].total_price = 0
				}
			}
			let data = JSON.parse(JSON.stringify(this.infoForm.mode[index]))
			let undertaker_item  = this.infoForm.mode[index].undertaker_item
			let expenditure_item  = this.infoForm.mode[index].expenditure_item
			let price_item  = this.infoForm.mode[index].price_item
			data.undertaker_item = JSON.stringify(undertaker_item)
			data.expenditure_item = JSON.stringify(expenditure_item)
			data.price_item = JSON.stringify(price_item)
			if(data.total_price !== '' && data.income && price_item.length && data.expenditure && undertaker_item.length && expenditure_item.length){
				data.order_after_id = this.infoForm.order_after_id
				if(data.mode_id){
					delete data.undertaker_list
					delete data.expenditure_list
					delete data.type_list
					this.$http(this.$ApiList.UpdateAfterMode,data).then(res=>{
						let data = {
							order_after_id: this.$route.query.id
						};
						this.$http(this.$ApiList.AfterInfo, data).then(res => {
							this.infoForm.mode = res.datas.mode
							this.infoForm.mode.unshift({
								add_time:'日期',
								expenditure:'支出',
								undertaker_item: '承担人',
								expenditure_item: '支出对象',
								total_price:'合计',
								price_item:'费用类别',
								income:'收入',
								desc:'备注'
							})
							this.isCostInput = true
							this.$forceUpdate();
						})
					})
				}else{
					this.$http(this.$ApiList.AddAfterMode,data).then(res=>{
						let data = {
							order_after_id: this.$route.query.id
						};
						this.$http(this.$ApiList.AfterInfo, data).then(res => {
							this.infoForm.mode = res.datas.mode;
							this.infoForm.mode.unshift({
								add_time:'日期',
								expenditure:'支出',
								undertaker_item: '承担人',
								expenditure_item: '支出对象',
								total_price:'合计',
								price_item:'费用类别',
								income:'收入',
								desc:'备注'
							})
							this.isCostInput = true
							this.$forceUpdate();
						})
					})
				}
			}
		},
		// 获取下啦选择框的值
		onGetSelect(obj){
			const { index,type,list } = obj
			const data = list.map(item =>{
					const objs = {
						id:item.id,
						content:item.content
					}
					return objs
				})
			if(type=== 'undertaker'){
				this.infoForm.mode[index].undertaker_item = data
			}else if(type === 'expenditure'){
				this.infoForm.mode[index].expenditure_item = data
			}else if(type === 'price'){
				this.infoForm.mode[index].price_item = data
			}
			this.addAfterMode(index)
		}
	},
	created() {
		this.init();
	},
	filters:{
		countStatus(val){
			switch (Number(val)) {
				case 0:
					return '待查收'
					break;
				case 1:
					return '协商方案'
					break;
				case 2:
					return '处理方案'
					break;
				case 3:
					return '处理完成'
					break;
				default:
					break;
			}
		}
	},
	watch: {
		'patchForm.goods_id':{
			deep:true,
			handler:function(val){
				if(val){
					this.getGoodsList(val);
				}
			}
		}
	},
	components:{
		goods,
		BaseSelect
	}
};
</script>
<style lang="scss">
.etit-after-sale {
	.last {
		margin-bottom: 0;
	}
	.upload-drag {
		.el-upload {
			vertical-align: top;
		}
		.el-upload__tip {
			line-height: normal;
		}
	}
	.el-date-editor{
		width: 100%;
	}
	.case_upload {
		display: flex;
		flex-wrap: wrap;
		.el-col {
		}
	}
	.el-select {
		display: block;
	}
	.upload-box {
		padding-left: 40px;
		.case-img-upload {
			display: flex;
			.case-img-upload-imgs {
				flex: 1;
				align-items: flex-start;
				.el-image {
					width: 140px;
					height: 140px;
					border: solid 1px #e5e5e5;
					margin-left: 25px;
					vertical-align: top;
				}
				video{
					width: 138px;
					height: 138px;
					margin-left: 25px;
				}
			}
			.case-img-upload-imgs-info {
				width: 100%;
				max-width: 660px;
				border: solid 1px #e5e5e5;
				margin-left: 25px;
				min-height: 390px;
				.case-img-upload-imgs-info-box {
					position: relative;
					.el-icon-error {
						position: absolute;
						font-size: 20px;
						color: #ef3030;
						right: 5px;
						top: 5px;
						z-index: 1;
						background-color: #fff;
						border-radius: 50%;
						cursor: pointer;
					}
				}
				.el-image {
					width: 100%;
					vertical-align: top;
				}
			}
			.vice_big_box {
				position: relative;
				display: inline-block;
				vertical-align: top;
				margin-bottom: 20px;
				.el-icon-error {
					position: absolute;
					font-size: 20px;
					color: #ef3030;
					right: 5px;
					top: 5px;
					z-index: 1;
					background-color: #fff;
					border-radius: 50%;
					cursor: pointer;
				}
			}
		}
		.el-upload__tip {
			width: 80px;
			text-align: center;
		}
		.el-form-item__label {
			float: none;
		}
		.el-form-item__content {
			margin-left: 0 !important;
			.el-button--danger {
				width: 80px;
				background-color: #37c1d6;
				border-color: #37c1d6;
			}
		}
	}
	 .order-title {
		margin-top: 20px;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #dedede;
		font-size: 16px;
		font-weight: bold;
	}
	 .order-info-title {
		margin: 20px 0;
		padding-left: 6px;
		line-height: 20px;
		border-left: 4px solid #2073f5;
	}
	.order-info-content .el-col {
		line-height: 40px;
	}
	.progress{
		.progress-list{
			border: 1px solid #ccc;
			.list-item{
				display: flex;
				border-bottom: 1px solid #ccc;
				&:last-child{
					border-bottom: none;
				}
				.item-left{
					padding: 5px 0;
					width: 120px;
					text-align:center;
					border-right: 1px solid #ccc;
				}
				.item-right{
					padding: 5px 0;
					margin-left: 10px;
					flex: 1;
					display: flex;
					.el-icon-error{
						margin: 0 10px;
						line-height: 40px;
					}
				}
			}
			.item-push{
				height: 40px;
				text-align: center;
				i{
					margin-top: 3px;
					width: 34px;
					height: 34px;
					line-height: 34px;
					text-align: center;
					font-size: 28px;
					color: #fff;
					background-color: #000;
					border-radius: 50%;
				}
			}
			.col8{
				height: 100%;
				border-right: 1px solid #ccc;
				text-align: center;
			}
		}
	}
	.barter{
		.el-form-item__content{
			display: flex;
		}
		.btn{
			margin-left: 10px;
		}
	}
	.goods_img{
		display: flex;
		flex-wrap: wrap;
		.img-list{
			display: flex;
			.img-item{
				position: relative;
				width: 100px;
				height: 100px;
				margin-right: 10px;
				margin-bottom: 10px;
				.del{
					position: absolute;
					z-index: 9;
					right: 2px;
					top: 2px;
					font-size: 18px;
					color: #fff;
					background-color: crimson;
					border-radius: 50%;
					cursor: pointer;
				}
			}
		}
	}
}
 .el-form-item__content /deep/ .el-date-editor.el-input{
	width: 100% !important;
}
</style>
